<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 
    条件演染:
        1.v-if
            写法:
                (1).v-if="表达式”
                (2).v-else-if="表达式"
                (3).v-else="表达式"
            适用于:切换频率较低的场景。
            特点:不展示的DOM元素直接被移除。
            注意: v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
        2.v-show
            写法:v-show="表达式”
            适用于:切换频率较高的场景。
            特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
        3.备注:使用v-if的时，元素可能无法获取到,而使用v-show一定可以获取到。 
-->


    <script src="../js/vue.js"></script>
    <div id="root">

        <h2>当前的n值是{{n}}</h2>
        <button @click="n++">点我++</button>
        <!-- 使用v-show做条件渲染 -->
        <!-- v-show的底层实现是通过调整display属性实现的,组件还是渲染的 -->
        <h2 v-show="false">欢迎{{name}}</h2>
        <h2 v-show="a">欢迎{{name}}</h2>
        <h2 v-show="1 === 3">欢迎{{name}}</h2>

        <!-- 使用v-if做条件渲染 -->
        <!-- 使用v-if不渲染组件 -->
        <h2 v-if="false">欢迎{{name}}</h2>
        <h2 v-if="a">欢迎{{name}}</h2>
        <h2 v-if="1 === 3">欢迎{{name}}</h2>


        <!-- 如果需要频繁的切换显示隐藏,使用v-show,因为已经渲染完了,只是调整display属性 -->
        <div v-show="n === 1">A</div>
        <div v-show="n === 2">B</div>
        <div v-show="n === 3">C</div>
        <!-- 如果需要频繁的切换显示隐藏,使用v-if,因为如果频繁的使用v-if,会在DOM里频繁的增添删除节点,会很烦 -->
        <!-- v-else-if与JavaScript中的elseif是一样的,当v-if成立后会忽略v-else-if,与上面的v-show做对比,v-show会逐个比较是否(条件)成立 -->
        <!-- 使用v-if和v-else-if效率会更高 -->
        <!-- 与JavaScript一样,当if条件不成立时,会启用else -->
        <!-- 当使用v-if,v-else-if,v-else时解构不可以被打断 -->
        <div v-if="n === 1">A</div>
        <div v-else-if="n === 2">B</div>
        <div v-else-if="n === 3">C</div>
        <div v-else="n === 4">D</div>


        <!-- <div v-show="n == 1"> -->
        <div v-if="n == 1"></div>
            <!-- 快捷键:按住Alt选中需要增添的位置,可以在多个地方输入相同的代码 -->
            <h2>你好</h2>
            <h2>吴亦凡</h2>
            <h2>监狱</h2>
        </div>
        <!-- 使用template时不会像div一样破坏解构(嵌套),而是直接显示(没有嵌套) -->
        <!-- 使用template时只可以使用v-if,不可以使用v-show -->
        <template v-if="n == 1"></div>
            <!-- 快捷键:按住Alt选中需要增添的位置,可以在多个地方输入相同的代码 -->
            <h2>你好</h2>
            <h2>吴亦凡</h2>
            <h2>监狱</h2>
        </template>

    </div>
    </div>
    <script>
        const vm = new Vue({
            el:'#root',
            data(){
                return{
                    name:'吴亦凡',
                    a:false,
                    n:0,
                }
            },
            methods: {
            },
        })
    </script>
</body>
</html>